<template>
  <div
    @click.self="close"
    class="ui-login"
    v-if="show">
    <div class="select" :style="{
      bottom: showSelect ? 'calc(50% - 3.5rem)' : '-100%'
    }">
      <div class="item" v-waves @click="weChatAuthorization">
        <div class="icon">&#xe759;</div>
        <div class="text">微信登录</div>
      </div>
      <div class="item" v-waves @click="login">
        <div class="icon" style="background-color: #ff5700">&#xe655;</div>
        <div class="text">账号登录</div>
      </div>
      <!--<div class="item" v-waves @click="jump">-->
        <!--<div class="icon" style="background-color: orange">&#xe641;</div>-->
        <!--<div class="text">注册</div>-->
      <!--</div>-->
    </div>
    <div class="login" :style="{
      bottom: showLogin ? 'calc(50% - 95px - 2.25rem)' : '-100%'
    }">
      <div class="title">
        <div
          v-waves
          @click="loginBackToSelect"
          class="icon back">&#xe6a9;</div>
        登录
      </div>
      <div class="input">
        <div class="icon">&#xe655;</div>
        <input type="text" v-model.trim="username" placeholder="手机号/用户名">
      </div>
      <div class="input">
        <div class="icon">&#xe62a;</div>
        <input type="password" v-model.trim="password" placeholder="登录密码">
      </div>
      <div class="notice">
        <div class="forget-password" @click="showLogin = false; showFindPassword = true">忘记密码?</div>
      </div>
      <div class="input" style="margin-top: 1.3rem">
        <div class="submit" @click="signInByPassword">登&nbsp;录</div>
      </div>
    </div>
    <div class="find-password" :style="{
      bottom: showFindPassword ? 'calc(50% - 127.5px - 3rem)' : '-100%'
    }">
      <div class="title">
        <div
          v-waves
          @click="showLogin = true; showFindPassword = false"
          class="icon back">&#xe6a9;</div>
        找回密码
      </div>
      <div class="input">
        <div class="icon">&#xf051;</div>
        <input type="tel" v-model.trim="mobile" placeholder="注册手机号">
      </div>
      <div class="input">
        <div class="icon">&#xe60e;</div>
        <input type="tel" v-model.trim="code" style="width: calc(100% - 40px - 6rem)"  placeholder="验证码">
        <div
          class="get-code"
          @click="getCode"
          :class="{disabled: disabled}">{{getCodeText}}</div>
      </div>
      <div class="input">
        <div class="icon">&#xe62a;</div>
        <input type="password" v-model.trim="f_password" placeholder="登录密码">
      </div>
      <div class="input">
        <div class="submit" @click="findPassword">找回密码</div>
      </div>
    </div>
  </div>
</template>
<script>
import Store from '@store'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showFindPassword: false,
      showSelect: false,
      showLogin: false,
      showRegister: false,
      username: '',
      password: '',
      f_password: '',
      disabled: false,
      mobile: '',
      code: '',
      getCodeText: '获取验证码'
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.showSelect = val
          }, 50)
        })
      }
    }
  },
  methods: {
    /**
     *  @purpose 找回密码
     */
    findPassword () {
      if (!this.mobile) {
        this.toast('请输入手机号码...!')
        return false
      }
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/).test(this.mobile)) {
        this.toast('手机号码格式错误...!')
        return false
      }
      if (!this.code) {
        this.toast('请输入验证码...!')
        return false
      }
      if (!this.f_password) {
        this.toast('请输入密码...!')
        return false
      }
      this.showLoading()
      this
        .$api
        .sign
        .findPassword(this.mobile, this.code, this.f_password)
        .then(r => {
          this.toast('密码找回成功')
          this.showFindPassword = false
          this.showLogin = true
        })
    },
    /**
     *  获取验证码
     */
    getCode () {
      if (!this.mobile) {
        this.toast('请输入手机号码...!')
        return false
      }
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/).test(this.mobile)) {
        this.toast('手机号码格式错误...!')
        return false
      }
      this.disabled = true
      this.showLoading()
      this
        .$api
        .sms
        .smsCodeForFindPassword(this.mobile)
        .then(r => {
          this.toast('验证码发送成功,请注意查收')
          let time = 60
          this.getCodeText = time + 's'
          let auto = setInterval(() => {
            if (time > 0) {
              time--
              this.getCodeText = time + 's'
            } else {
              this.disabled = false
              this.getCodeText = '获取验证码'
              clearInterval(auto)
            }
          }, 1000)
        })
        .catch(() => {
          this.disabled = false
        })
    },
    /**
     * @purpose 用户名密码登录
     */
    signInByPassword () {
      if (!this.username) {
        this.toast('用户名不能为空...!')
        return false
      }
      if (!this.password) {
        this.toast('密码不能为空...!')
        return false
      }
      this.close()
      this.showLoading()
      this
        .$api
        .sign
        .signInByPassword(this.username, this.password)
        .then(r => {
          this.setToken(r.token)
          Store.dispatch('getUserInfo', () => {
            Store.dispatch('getOrderTotalNumByStatus')
            this.toast('登录成功')
          })
        })
    },
    /**
     * 微信授权
     */
    weChatAuthorization () {
      this.showLoading()
      this
        .$api
        .wechat
        .appid()
        .then(appid => {
          let callbackUrl = window.location.href
          let redirectUri = window.location.protocol + '//' + window.location.host + '/sign/authorization'
          let authUri = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${this.urlencode(redirectUri)}&response_type=code&scope=snsapi_userinfo&state=${callbackUrl}`
          window.location.href = authUri
        })
    },
    /**
     * @purpose 关闭
     */
    close () {
      this.showSelect = false
      this.showLogin = false
      setTimeout(() => {
        this.$emit('close', false)
      }, 300)
    },
    jump () {
      window.location.href = '/sign/register'
    },
    /**
     * @purpose 切换到登录弹窗
     */
    login () {
      this.showSelect = false
      setTimeout(() => {
        this.showLogin = true
      }, 300)
    },
    /**
     * @purpose 切换到选择
     */
    loginBackToSelect () {
      this.showLogin = false
      setTimeout(() => {
        this.showSelect = true
      }, 300)
    }
  }
}
</script>
<style scoped lang="sass">
  .ui-login
    width: 100%
    height: 100%
    position: fixed
    top: 0
    left: 0
    z-index: 100
    background-color: rgba(0,0,0,0.8)
    display: flex
    align-items: center
    justify-content: center
    .login,.find-password
      width: 80%
      height: calc(200px + 6rem)
      background-color: #ffffff
      border-radius: 3px
      position: absolute
      transition: all .3s
      -webkit-backface-visibility: hidden
      -moz-backface-visibility: hidden
      -ms-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-perspective: 1000
      -moz-perspective: 1000
      -ms-perspective: 1000
      perspective: 1000
      .notice
        width: calc(100% - 20px)
        height: 20px
        padding: 1rem 10px 0 10px
        display: flex
        align-items: center
        flex-direction: row-reverse
        text-decoration: underline
      .input
        width: calc(100% - 20px)
        margin: 1.5rem 10px 0 10px
        border-radius: 3px
        height: 45px
        background-color: #f4f4f4
        display: flex
        align-items: center
        .get-code
          width: calc(6rem - 2px)
          border-top-right-radius: 3px
          border-bottom-right-radius: 3px
          height: calc(100% - 2px)
          border: 1px solid #ff5700
          background-color: #ff5700
          color: #ffffff
          display: flex
          align-items: center
          justify-content: center
          font-size: .8rem
          &:active:not(.disabled)
            background-color: #ffffff
            color: #ff5700
          &.disabled
            background-color: #cccccc
            border-color: #cccccc
            color: #999999
        .icon
          width: 40px
          height: 45px
          font-size: 1.2rem
          display: flex
          align-items: center
          justify-content: center
          color: #666666
        input
          flex: 1
          height: 100%
          font-size: 1rem
        .submit
          width: 100%
          height: 100%
          display: flex
          align-items: center
          justify-content: center
          background-color: #ff5700
          color: #ffffff
          border-radius: 3px
          border: 1px solid #ff5700
          &:active
            background-color: #ffffff
            color: #ff5700
      .title
        width: 100%
        height: 45px
        display: flex
        align-items: center
        .icon.back
          width: 45px
          height: 45px
          font-size: 1rem
          display: flex
          align-items: center
          justify-content: center
    .select
      height: 7rem
      width: 18rem
      background-color: #ffffff
      border-radius: 3px
      display: flex
      align-items: center
      justify-content: center
      position: absolute
      transition: all .3s
      -webkit-backface-visibility: hidden
      -moz-backface-visibility: hidden
      -ms-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-perspective: 1000
      -moz-perspective: 1000
      -ms-perspective: 1000
      perspective: 1000
      .item
        flex: 1
        height: 100%
        display: flex
        align-items: center
        justify-content: center
        flex-direction: column
        .icon
          width: 4rem
          height: 4rem
          display: flex
          align-items: center
          justify-content: center
          font-size: 2rem
          border-radius: 50%
          background-color: #09bb07
          color: #ffffff
        .text
          font-size: .8rem
          margin-top: .5rem
          color: #999999
    .find-password
      height: calc(235px + 6rem)
</style>
